<template>
 <el-dialog
  class="commonDialog"
  title="选择物料"
  :visible.sync="visible"
  :append-to-body="true"
  width="856px"
  :close-on-click-modal="false"
  :before-close="close">
    <div class="selectNutrient" style="position:relative;">
        <div class="search">
            <span class="ml10">物料类别：</span>
               <el-select class="commonSelect" v-model="materialCategoryId" style="width: 200px;">
                    <el-option value="">请选择</el-option>
                    <el-option v-for="item in adddishesList" :key="item.id" :label="item.materialName" :value="item.id">{{item.materialName}}</el-option>
                </el-select>
              <span>物料名称：</span>
              <el-input placeholder="请输入物料名称" class="commonInput" v-model="materiaName" style="width: 200px;"> </el-input>
              <el-button class="conditionBtn" @click="getMaterialDetail">查询</el-button>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
           <el-table
                ref="multipleTable"
                :data="resultObj.result"
                class="commonTable"
                tooltip-effect="dark"
                height="100%"
                style="width: 100%"
                stripe
               @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    align="right"
                    :selectable='checkSelect'>
                </el-table-column>
                <el-table-column
                width='60px'
                align="center"
                label="选择">
                </el-table-column>
                <el-table-column
                    prop="materialCategoryName"
                    label="物料类别"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="materialName"
                    label="物料名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop='materialStatus'
                    label="重量（g）"
                    align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.materialStatus" placeholder='请输入重量'></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination" style="position:relative;">
            <div style="position: absolute;left:140px;font-size:30px;" @click="terpineWeight">
                <el-badge :value="bubble" class="item"  >
                    <i class="el-icon-shopping-cart-2"></i>
                </el-badge>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="conditionForm.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="conditionForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="resultObj.toTalCount">
            </el-pagination>
        </div>
        <div class="buttonBlocks">
            <el-button class="commonButton" @click.native="close">取消</el-button>
            <el-button class="commonButton" @click.native="makeSure">确定</el-button>
        </div>
    </div>
    <!-- <el-dialog
        title="菜品选择"
        width="200px"
        :visible.sync="weightVisible"
        v-if='weightVisible'
        style="position: absolute;left:10px;top:250px">
    </el-dialog> -->
    <el-dialog
        class="commonDialog"
        title="菜品选择"
        :visible.sync="weightVisible"
        :append-to-body="true"
        width="200px"
        :close-on-click-modal="false"
        :before-close="close1">
        <el-row v-for="(item, index) in changeTerpineList" :key="index">
            <template>
                {{item.materialName}}:
                <el-input class="commonInput" style="width:80px"></el-input> g
                <i class=" el-icon-delete"></i>
            </template>
        </el-row>
    </el-dialog>
</el-dialog>
</template>
<script>
import axios from 'axios';
export default {
    props: ['getParentTableData', 'closeParentModule', 'parentSelectNutrients'],
    data() {
        return {
            urlPrev: 'http://webapi.free.idcfengye.com/',
            visible: false,
            adddishesList: [],
            materiaName: '',
            materialCategoryId: '',
            weightVisible: false,
            conditionForm: {
                pageIndex: 1,
                pageSize: 10000
            },
            pageIndex: 1,
            pageSize: 10,
            resultObj: {},
            weight:0,
            multipleSelection: [],
            bubble: 0,       //选中菜品的数量
            changeTerpineList: []   //选中菜品集合
        }
    },
    mounted(){
         this.visible = true;
         this.getNutrients();
         this.getMaterialDetail();
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;

        },
        checkSelect(row, index){
            this.changeTerpineList = row
            // this.weightVisible = true
            if(row.materialStatus === '已配置') {
                return 1;
            }else {
                return 0;
            }
        },
        //菜品重量设置弹窗
        terpineWeight(){
            this.weightVisible = true;
        },
         //关闭弹框
        close() {
            this.$emit('closeParentModule', false);
        },
        //关闭菜品选择窗口
        close1() {
            this.weightVisible = false;
        },
        // 获取物料类别下拉列表
        getNutrients() {
           const url= this.urlPrev + `api/bdmaterial/getmaterial`;
            axios({method: 'post', url: url, data: this.conditionForm})
            .then(rsp=>{
                if (rsp.data.status == 1) {
                    this.adddishesList = rsp.data.result;
                } else if(rsp.data.status == 0){
                    this.$message({
                        message: rsp.data.message,
                        type: 'error'
                    });
                }
            })
            .catch(err=> console.log(err));
        },
        // 获取物料列表
        getMaterialDetail() {
            const url = this.urlPrev + `api/bddishes/getmaterialdetail`;
            if(this.materiaName != "" ){
                this.conditionForm.materiaName = this.materiaName;
            }
            if(this.materialCategoryId != "") {
                this.conditionForm.materialCategoryId = this.materialCategoryId;
            }
            axios({ method: 'post', url: url, data: this.conditionForm })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                      console.log(rsp.data)
                        this.resultObj = rsp.data;
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
            .catch(err => console.log(err));
        },
        handleSizeChange(val){
            this.conditionForm.pageSize = val;
        },
        handleCurrentChange(val){
            this.conditionForm.pageIndex = val;
        },
        makeSure(){
            if(!this.multipleSelection.length) {
                 this.$message({
                    message: '请选择至少一种物料',
                    type: 'warn',
                });
            }else {
                this.$emit('parentSelectNutrients', this.multipleSelection);
                this.$emit('closeParentModule', false);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .selectNutrient {
        @include flex();
        flex-direction: column;
    }
    .operBtn {
        .el-button:first-child {
            margin-left: 0;
        }
    }
    .search {
        border-bottom: 0;
    }
    .tableContent {
        min-height: 350px;
        width: 100%;
        .el-table {
            min-height: 350px;
        }
    }
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    .selectNutrient{
        .el-dialog {
            min-height: 200px;
            // margin-top: 0 !important;
            @include position(absolute, 50%, auto, auto, 50%);
            transform: translate(-50%, -50%);
            border: 6px solid #DCDCDC;
            @include rounded-corners(10px);
            .el-dialog__header {
                padding: 0 23px;
                height: 51px;
                background-color: #1890FF;
                @include rounded-corners(5px);
                .el-dialog__title {
                    line-height: 51px;
                    font-size: 16px;
                    color: white;
                }
                .el-dialog__headerbtn {
                    top: 0;
                    right: 23px;
                    .el-icon-close {
                        font-size: 25px;
                        color: white;
                        line-height: 51px;
                    }
                }
            }
            .el-dialog__body {
                padding: 10px 29px;
                min-height: 479px;
            }
        }
    }

</style>
